<template>
  <ul class="header3">
    <li>
      <span>武汉</span><i class="city-arrow"></i>
    </li>
    <li>
      <router-link to="/hot">热映</router-link>
    </li>
    <li>
      <router-link to="/cinema">影院</router-link>
    </li>
    <li>
      <router-link to="/wait">待映</router-link>
    </li>
    <li>
      <router-link to="/classic">经典电影</router-link>
    </li>
    <li>
      <div class="search iconfont">&#xe996;
      </div>
    </li>
  </ul>
</template>

<script>
export default {
  name: "header3"
}
</script>

<style scoped>
.city-arrow {
  width: 0;
  height: 0;
  border: 4px solid #b0b0b0;
  border-left-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  display: inline-block;
  margin-left: 4px;
  margin-top: 5px;
}
ul {
  list-style: none;
}
a {
  color: #666;
}
.header3 > li:first-of-type {
  font-weight: normal;
}
.header3 {
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 15px;
  font-weight: 700;
  border-bottom: 1px solid #e8e8e8;
  width: 100%;
  height: 44px;
  background: #fff;
}
.header3 a.router-link-exact-active {
  font-size: 17px;
  font-weight: 700;
  padding-bottom: 7px;
  color: #333;
  border-bottom: 2px #f03d37 solid;
}
.search {
  width: 20px;
  height: 20px;
  line-height: 20px;
  font-size: 25px;
  color: #f03d37;
}
</style>
